clear 清除浮動
浮動元素顧名思義就是浮動在版面之上，所以如果接著順序往下寫的程式碼沒有使用clear清除浮動的話，畫面會重疊，如果後面的元素不打算做浮動元素的話，可以寫上clear語法

比如說

<div class="header">表頭</div>
<div class="menu">選單</div>
<div class="content">內容</div>
<div class="footer">頁底</div>

CSS

.header{
    height: 50px;
    width: 800px;
    background-color: blue;
}
.menu{
    height: 50px;
    width: 300px;
    background-color:green;
    float:left;
}
.content{
     height: 50px;
     width: 300px;
     background-color:red;
     float:left;
}
.footer{
    height: 60px;
    width: 800px;
    background-color: yellow;
}

以上是沒有使用clear語法的程式碼，結果會如下圖

<div class="header">表頭</div>
<div class="menu">選單</div>
<div class="content">內容</div>
<div class="clearfix"></div>
<div class="footer">頁底</div>

CSS

.header{
    height: 50px;
    width: 800px;
    background-color: blue;
}
.menu{
    height: 50px;
    width: 300px;
    background-color:green;
    float:left;
}
.content{
     height: 50px;
     width: 300px;
     background-color:red;
     float:left;
}
.clearfix{
    clear: both;
}
.footer{
    height: 60px;
    width: 800px;
    background-color: yellow;
}

以上是使用clear語法的程式碼，結果如下圖